<template>
<div class="m-products-list">
    <ul>
        <li v-for="item in nav" :key="item.key" :class="{'s-nav-active':item.active}">{{item.name}}</li>
    </ul>
    <el-row>
        <Mitem v-for="(item,index) in productsList" :key="index" :meta='item'/>
    </el-row>
</div>

</template>

<script>
import  Mitem from './item.vue'
export default {
    components:{
         Mitem
    },
       data(){
           return{
               nav:[{
                 key:'s-default' , 
                 name:'智能排序',
                 active:true
               },{
                   key:'s-price',
                   name:'价格最低',
                   active:false
               },{
                 key:'s-score',
                 name:'人气最高',
                 active:false
               },{
                key:"s-comment" ,
                name:'评价最高',
                active:false

               }

               ],
               productsList:[{
                   img:'//p0.meituan.net/msmerchant/c39bb8e6edb504cbf31181d116bfbc7e61587.jpg@275w_156h_1e_1c',
                   title:'巴鸿菌汤火锅',
                   type:'food',
                   score:'4.1',
                   commentNum:0,
                    comment:[{
                        userName:'xxx',
                        evalaute:'好吃'
                        }],
                    tab:'重庆火锅|滦州市',
                    address:'滦州市工农路',
                    avgprice:64,
                    deal_items:[{
                        title:'菌汤火锅4人餐，包间免费',
                        price:99,
                        counter_price:1150,
                        saeNum:11984,
                        price_type:'元'
                    }

                    ]
               },{
                   img:'//p1.meituan.net/bbia/163462668_1599123837932.jpeg@275w_156h_1e_1c',
                   title:'呷哺呷哺（滦县现代城店）',
                   type:'food',
                   score:'5',
                   commentNum:401,
                    comment:[{
                        userName:'xxx',
                        evalaute:'好吃'
                        }],
                    tab:'小火锅|东',
                    address:'滦州市新城燕山大街与滦河路交叉口路西现代城一层',
                    avgprice:57,
                    deal_items:[{
                        title:'元气牛羊双人餐，包间免费',
                        price:109,
                        counter_price:988,
                        saeNum:10831,
                        price_type:'元'
                    }

                    ]

               }
               ]
           }
       }
}
</script>

<style scoped>

</style>